<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
<body>
    <div id='app'>
        单价：<input type="number" v-model="price"><br>
        数量：<input type="number" v-model="count"><br>
        总价：{{price * count}}<br>
        总价：{{getTotal()}} 方法<br>
        总价：{{total}} 计算属性<br>
        <hr>
        
        <input v-model="text" type="text">
        <hr>
        身高：<input type="number" v-model="h"> m<br>
        体重：<input type="number" v-model="w"> kg<br>
        BMI：{{getBMI()}}<br>
        {{bmi}}
        <hr>
        <span v-if='bmi < 18.5'>你的体脂率偏低</span>
        <span v-else-if='bmi > 23.9'>你的体脂率高</span>
        <span v-else>你的体脂率正常</span>
        正常范围：18.5~23.9 体重/身高的平方
    </div>
    <script>
		Vue.createApp({
            data() {
                return {
                    price: 5,
                    count: 1,
                    text: 'hello vue',
                    h: 0,
                    w: 0
                };
            },
            computed: {
                total() {   // 计算属性
                    console.log('计算属性');
                    return this.price * this.count;
                },
                bmi() { // 缓存
                    return (this.w / (this.h * this.h)).toFixed(2);
                }
            },
            methods: {   
                getTotal() {  // 计算方法
                    console.log('方法');
                    return this.price * this.count;
                },
                getBMI() {
                    return (this.w / (this.h * this.h)).toFixed(2);
                }
            }
        }).mount('#app');
    </script>
</body>
</html>
